import { defineComponent, PropType, VNode } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { IButtonContainerState } from '@ibiz-template/runtime';
import { IAppDEUIActionGroupDetail } from '@ibiz/model-core';
import './action-toolbar.scss';

export const IBizActionToolbar = defineComponent({
  name: 'IBizActionToolbar',
  props: {
    actionDetails: {
      type: Array<IAppDEUIActionGroupDetail>,
      required: true,
    },
    actionsState: {
      type: Object as PropType<IButtonContainerState>,
      required: true,
    },
    caption: String,
    mode: {
      type: String as PropType<'dropdown' | 'buttons'>,
      default: 'buttons',
    },
  },
  setup(props, { emit }) {
    const ns = useNamespace('action-toolbar');

    // 点击事件抛给表格执行
    const handleClick = async (
      detail: IAppDEUIActionGroupDetail,
      e: MouseEvent,
    ): Promise<void> => {
      e.stopPropagation();
      emit('action-click', detail, e);
    };

    return { ns, handleClick };
  },
  render() {
    const details = this.actionDetails || [];
    if (this.mode === 'buttons') {
      // 按钮模式
      return (
        <div
          class={[this.ns.b(), this.ns.m('buttons')]}
          onClick={(e): void => e.stopPropagation()}
        >
          {details.length > 0 &&
            details.map(detail => {
              if (this.actionsState[detail.id!].visible) {
                return [
                  detail.addSeparator && (
                    <div class={this.ns.e('separator')}></div>
                  ),
                  <el-button
                    text
                    size='small'
                    onClick={(e: MouseEvent): Promise<void> =>
                      this.handleClick(detail, e)
                    }
                    disabled={this.actionsState[detail.id!].disabled}
                    class={[this.ns.e('item'), this.ns.is('disabled', false)]}
                  >
                    {detail.showIcon && detail.sysImage && (
                      <iBizIcon icon={detail.sysImage}></iBizIcon>
                    )}
                    {detail.showCaption ? detail.caption : ''}
                  </el-button>,
                ];
              }
              return null;
            })}
        </div>
      );
    }
    // 下拉模式
    return (
      <el-dropdown
        onCommand={(command: IAppDEUIActionGroupDetail): Promise<void> =>
          this.handleClick(command, new MouseEvent('click'))
        }
        class={[this.ns.b(), this.ns.m('dropdown')]}
      >
        {{
          default: (): VNode => (
            <span class={this.ns.e('caption')}>
              {this.caption}
              <ion-icon
                class={this.ns.e('caption-icon')}
                name='ibiz-arrow-down'
              />
            </span>
          ),
          dropdown: (): VNode => (
            <el-dropdown-menu>
              {details.length > 0 &&
                details.map(detail => {
                  if (this.actionsState[detail.id!].visible) {
                    return (
                      <el-dropdown-item
                        class={[
                          this.ns.e('item'),
                          this.ns.is('disabled', false),
                        ]}
                        disabled={this.actionsState[detail.id!].disabled}
                        command={detail}
                      >
                        {detail.showIcon && detail.sysImage && (
                          <iBizIcon icon={detail.sysImage}></iBizIcon>
                        )}
                        {detail.showCaption ? detail.caption : ''}
                      </el-dropdown-item>
                    );
                  }
                  return null;
                })}
            </el-dropdown-menu>
          ),
        }}
      </el-dropdown>
    );
  },
});
